Coffee Tracker
Now that you’re familiar with Angular, let’s combine it with .NET! And what a powerful combination that is. The limit of what you can build using these two is only the limit of your imagination. We will be creating two separate applications: An Angular front-end and an ASP.NET Core Web Api. The front-end will call the api, similarly to what you’ve done before in our Shifts Logger project.
Requirements
This is an application where you should record sales in a coffee shop.
You can choose a different type of shop, if you're not a coffee person 🤓.
You should create two projects: A.NET WebApi and an Angular app.
You should have a filter functionality, so users can select records per date.
Make sure validation is user-friendly so the users know exactly what's wrong with their input.
Resources
Since this is your first full-stack Angular project, make sure you look up everything you don’t know. Try not to let any keyword, method or concept left-behind. This is the moment to build your foundation. And don’t forget to reach out on our Discord community if you have questions!
Tips
Angular has changed quite a bit over the years. Make sure you follow the latest documentation and tutorials, otherwise you might end up learning deprecated ways of doing things.
Your main objective is to call your API from the Angular App. Everything else is just moving data around and styling.
There are two ways to approach the construction of this app: Finishing the API first and then building the UI, or building each method end-to-end (ex: GetRecords method in the back-end plus list of records in the front-end). Choose one and stick to it.
We suggest you don't use UI libraries (such as Angular Material) in this project. Angular alone can be challenging enough and adding a rich library early on might overwhelm you. Also, you'll appreciate Angular Material more if you built applications without it first.
Challenges
Can you add integration with a real coffee api?
Enhance your app with other types of products sold in a cafe. 🍰
If you're comfortable with Angular, add complexity to your ecommerce with more entities: Products, Employees, Orders, Stock
